import 'antd/dist/antd.css';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore,combineReducers,applyMiddleware,bindActionCreators } from 'redux';

import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise';
import { createAction } from 'redux-actions';
import {Provider,connect} from 'react-redux';
import * as AppAction from './redux/AppAction';

const reducer = (state=0,action)=>{
    const count = state.count;
    const {type,payLoad} = action;
    switch(type){
        case 'ADD':
            return state+1;
        case 'DEC':
            return state-1;
        default:
            return state;
    }
}

const store = createStore(reducer);
class Counter extends Component{
    render(){
        const {value,onADD,onDEC} = this.props;
        return(
            <div>
                <h1>{value}</h1>
                <Button type="primary" onClick={onADD} style={{ marginRight: 10}}>+</Button>
                <Button type="primary" onClick={onDEC}>-</Button>
            </div>
        )
    }
}


function mapStateToProps(state){
    return {
        value:state
    }
}
// function mapDispatchToProps(dispatch){
//     return{
//         onADD: ()=> dispatch({type:'ADD'}),
//         onDEC: ()=> dispatch({type:'DEC'})
//     }
// }
const mapDispatchToProps = (dispatch)=>{
    return bindActionCreators(AppAction,dispatch)
}

const Apps = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

ReactDOM.render(
    <Provider store={store}>
        <Apps/>
    </Provider>,
    document.getElementById('root')
)

/*
const text = (state=0,action)=>{
    const {type,payLoad} = action;
    switch(type){
        case 'TEXT':
            return Object.assign({},state,{userName:payLoad});
        default:
            return state;
    }
}

const chatReducer = combineReducers({
    text
})

let {getState,subscribe,dispatch} = createStore(
    chatReducer,
    applyMiddleware(thunk,promiseMiddleware,createLogger),
);

function getData(){
    console.log('getData');
    var url = 'https://douban.uieee.com/v2/movie/in_theaters';
    var url = 'http://www.weather.com.cn/data/sk/101010100.html';

    return fetch(url).then((res)=>{
        return res.json()
    }).then(data=>{
        console.log('data',data);
        return data.weatherinfo.city;
    })
}

const TextContent =({value,onText})=>{
    return  <div>
                <h1>{value.text.userName}</h1>
            </div>
}

class Content extends Component{
    constructor(props){
       super(props);
    }
    componentDidMount(){
        //发出同步
        dispatch(this.funs());
        //发出异步
        var url = 'http://www.weather.com.cn/data/sk/101010100.html';
        dispatch(createAction(
            fetch(url).then((res)=>{
                console.log('异步res',res);
                return res.json();
            })
        ));
    }
    clickEvent=()=>{
        dispatch(this.funs());
    }

    //箭头函数
    funs=()=>dispatch=> new Promise((resolve,reject)=>{
        dispatch({
            type: 'TEXT',
            payLoad: 'titile starting.........'
        });
        getData().then(res => {
            console.log('res',res);
            dispatch({
                type: 'TEXT',
                payLoad: res
            })
        }).catch(err => {
            dispatch({
                type: 'TEXT',
                payLoad: 'titile errors........'
            })
        })
    })

    render(){
        return (
            <div>
                <TextContent
                    value={getState()}
                />
                <Button onClick={this.clickEvent}>点击</Button>
            </div>
        )
    }
}

const render=()=>{
    ReactDOM.render(
        <Content/>,
        document.getElementById('root')
    )
}
render();
subscribe(render);
*/
serviceWorker.unregister();
